<template>
  <div>
    <div class="navBox">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title.png"
        mode="scaleToFill"
        class="bancgoundImg"
      />
      <div class="navText">
        <p>通知</p>
      </div>
    </div>
    <scroll-view
      class="scroll-wrap no-scroll-bar scroll-list"
      style="height:calc(100% - 60px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div v-for="(item,index) in list" :key="index" class="contBox">
        <div class="top">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/dfsdfa@2x.png"
            mode="scaleToFill"
          />
          <div>
            <p>{{item.appName}}</p>
            <span>{{item.createDate}}</span>
          </div>
        </div>
        <text class="cont">{{item.contents}}</text>
        <div class="img">
          <img v-for="(_,i) in item.imageList" :key="i" v-show="_" :src="_" />
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {} from '@/utils'
import { FIND_DYNAMIC_INFO_LIST } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [],
      alreadyLastPage: false,
      currentPage: 1
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
  },
  methods: {
    init () {
      this.list = []
      this.alreadyLastPage = false
      this.currentPage = 1
      this.findDynaicInfoList()
    },
    timeSplitWay (str) {
      if (str) {
        return str.split(' ')[0]
      } else {
        return ''
      }
    },
    imgListWay (str) {
      if (str) {
        return str.split('##')
      } else {
        return []
      }
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.findDynaicInfoList()
      }
    },
    findDynaicInfoList () {
      const vm = this
      let params = {
        providerId: vm.account.providerId,
        appId: 23
      }
      FIND_DYNAMIC_INFO_LIST(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            list.forEach(_ => {
              if (_.imageList) {
                _.imageList = vm.imgListWay(_.imageList)
                _.createDate = vm.timeSplitWay(_.createDate)
              }
            })
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.navBox {
  width: 100%;
  height: 60px;
  position: relative;
  .bancgoundImg {
    width: 100%;
    height: 60px;
    position: absolute;
    z-index: -1;
  }
  .navText {
    display: flex;
    justify-content: center;
    font-size: 16px;
    p {
      color: #fff;
      line-height: 60px;
    }
  }
}
.scroll-list {
  .contBox {
    padding: 15px;
    .top {
      display: flex;
      img {
        width: 50px;
        height: 50px;
      }
      div {
        margin-left: 10px;
        p {
          font-size: 15px;
          color: #000;
          line-height: 20px;
        }
        span {
          font-size: 13px;
          color: #999999;
          line-height: 20px;
        }
      }
    }
    .cont {
      font-size: 13px;
      line-height: 20px;
      color: #222222;
      margin: 12px 0;
      display: block;
    }
    .img {
      width: 100%;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      img {
        width: 100px;
        height: 100px;
        margin: 0 10px 5px 0;
        border-radius: 6px;
      }
      img:nth-child(3n + 0) {
        margin: 0;
      }
    }
  }
  .end-tip {
    margin: 0;
    padding: 15px;
    text-align: center;
    color: $gray;
    font-size: 15px;
  }
}
</style>
